<template>
    <div class="newsInfo-container">
        <!--<h3>我是消息详情组件&#45;&#45;{{$route.params.id}}</h3>-->
        <div class="title">{{newsInfo.title}}</div>
        <div class="info">
            <span class="time">发布时间：{{newsInfo.add_time}}</span>
            <span class="num">访问量：{{newsInfo.click}}</span>
        </div>
        <hr>
        <p v-html="newsInfo.content" class="content"></p>
        <comment-box></comment-box>
    </div>
</template>

<script>
    import comment from "../subcomponents/Comment.vue"
    export default {
        name: "NewsInfo",
        data(){
            return{
                id:this.$route.params.id,
                AllInfo:[],
                newsInfo:[]
            }
        },
        created(){
            this.getNewsInfo();
        },
        methods:{
            getNewsInfo(){
                this.$http.get("newsInfo.json").then(result=>{
                    this.AllInfo=result.body.message;
                    for(let i=0;i<this.AllInfo.length;i++){
                        if(this.id==this.AllInfo[i].id){
                            this.newsInfo=this.AllInfo[i]
                        }
                    }
                })
                // console.log(this.newsInfo);
            }
        },
        components:{
           "comment-box":comment
        }
    }
</script>

<style>
    .newsInfo-container{
        margin: 0 4px;
    }
    .newsInfo-container img{
        width: 100%;
    }
    .newsInfo-container .title{
        text-align: center;
        color: darkred;
        font-size: 16px;
        margin: 10px 0;
    }
    .newsInfo-container .info{
        font-size: 12px;
        color: #A9A9A9;
        overflow: auto;
    }
    .newsInfo-container .info .time{
        float: left;
    }
    .newsInfo-container .info .num{
        float: right;
    }
    .newsInfo-container .content p{
        color: #222;
    }

</style>